<template>
	<view class="top-bar">
		<!-- 频道栏 -->
		<view class="channel-list">
			<text class="channel-item active">要闻</text>
			<text class="channel-item">推荐</text>
			<text class="channel-item">关注</text>
			<text class="channel-item active">24小时</text>
			<text class="channel-item">娱乐</text>
			<text class="channel-item">泉州</text>
			<text class="channel-item">财经</text>
		</view>
		<!-- 天气&搜索栏 -->
		<view class="weather-search">
			<text class="weather-info">24℃ 阴天 泉州 PM2.01</text>
			<view class="search-box">
				<text class="search-placeholder">搜索关键词</text>
			</view>
		</view>
		<!-- 更新提示 -->
		<view class="update-tip">为您更新了15条内容</view>
	</view>
	<view class="container">
		<CustomTextView v-for="(news, index) in newsList" 
		:key="index" 
		:title="news.title" 
		:source="news.source"
			:comment="news.comment" 
			:time="news.time" 
			:is-top="news.isTop" 
			:showSearch="news.showSearch"
			:mode="news.newstype" :images="news.imagelist">
			<template v-slot:tips>
				<view style="display: flex; align-items: center;">
					<text style="font-size: 13px;">搜索：</text>
					<button class="slot" @click="handleClick">降温吃啥</button>
					<button class="slot" @click="handleClick">如何防寒</button>
				</view>
			</template>
		</CustomTextView>
	</view>
</template>

<script>
	import data from "../../data/news.json"
	import CustomTextView from "../../components/cardViewText.vue"

	export default {
		components: {
			CustomTextView,
		},
		onLoad(){
			this.newsList = data.newsList;
		},
		 methods: {
		    handleClick() {
		      return false;
		    }	
		  },
		data() {
			return {
				newsList:null
			}
		},
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	/* 顶部导航 */
	.top-bar {
		background-color: #C9D;
		color: #fff;
	}

	.channel-list {
		display: flex;
		padding: 8px 10px;
		overflow-x: auto;
	}

	.channel-item {
		padding: 0 8px;
		font-size: 14px;
		white-space: nowrap;
	}

	.channel-item.active {
		font-weight: bold;
		border-bottom: 2px solid #fff;
	}

	.weather-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 10px;
	}

	.weather-info {
		font-size: 14px;
	}

	.search-box {
		background-color: #fff;
		border-radius: 12px;
		padding: 4px 10px;
		font-size: 12px;
		color: #999;
		width: 180px;
	}

	.update-tip {
		background-color: #C9D;
		padding: 6px 10px;
		font-size: 14px;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #999;
	}

	.tab-item.active {
		color: #ff7a45;
	}

	.tab-icon {
		font-size: 20px;
		margin-bottom: 2px;
	}
	
	.slot {
		font-size: 11px;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		}
</style>